<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%--查询session中是否有信息--%>
<%@ include file="safe.jsp"%>
<html>
<head>
<title>聊天室</title>
<link href="CSS/style.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="js/emoji_jQuery.min.js"></script>


</head>
<body>

	<table width="778" height="150" border="0" align="center"
		cellpadding="0" cellspacing="0" background="images/top1.jpg">
		<tr>
			<td>&nbsp;</td>
		</tr>
	</table>
	<table width="778" height="276" border="0" align="center"
		cellpadding="0" cellspacing="0">
		<tr>
			<td width="165" valign="top" bgcolor="#f6fded" id="online" style="padding:5px">在线人员列表</td>
			<td width="613" height="200px" valign="top"
				background="images/main_bj.jpg" bgcolor="#FFFFFF"
				style="padding:5px; ">
				<div style="height:290px; overflow:hidden" id="content">聊天内容</div></td>

		</tr>
	</table>
	<table width="778" height="95" border="0" align="center"
		cellpadding="0" cellspacing="0" bordercolor="#D6D3CE"
		background="images/bottom.jpg">

		<form action="" id="form1" name="form1" method="post">
			<input type="hidden" name="method" id="sendMessage" value="sendMessage"/>
			<tr>
				<td height="30" align="left">&nbsp;</td>
				<td height="37" align="left">
				<input name="from" id="from" type="hidden" value="${existUser.username}">[${existUser.username}  ]对
				<input name="to" id="to" type="text" value="" size="35" readonly="readonly">
				 说：
					</td>
				<td><button id="btn" type="button">emojiBtn</button></td>
				<td width="189" align="left">&nbsp;&nbsp;字体颜色： <select
					name="color" size="1" class="wenbenkuang" id="select">
						<option selected>默认颜色</option>
						<option style="color:#FF0000" value="FF0000">红色</option>
						<option style="color:#0000FF" value="0000ff">蓝色</option>
						<option style="color:#ff00ff" value="ff00ff">桃色</option>
						<option style="color:#009900" value="009900">绿色</option>
						<option style="color:#009999" value="009999">青色</option>
						<option style="color:#990099" value="990099">紫色</option>
						<option style="color:#990000" value="990000">暗夜</option>
						<option style="color:#000099" value="000099">深蓝</option>
						<option style="color:#999900" value="999900">卡其</option>
						<option style="color:#ff9900" value="ff9900">镏金</option>
						<option style="color:#0099ff" value="0099ff">湖波荡漾</option>
						<option style="color:#9900ff" value="9900ff">发亮蓝紫</option>
						<option style="color:#ff0099" value="ff0099">爱的暗示</option>
						<option style="color:#006600" value="006600">墨绿</option>
						<option style="color:#999999" value="999999">烟雨蒙蒙</option>
				</select>
				</td>
				<td width="19" align="left"><input name="scrollScreen"
					type="checkbox" class="noborder" id="scrollScreen"
					onClick="checkScrollScreen()" value="1" checked>
				</td>
			</tr>
			<tr>
				<td width="21" height="30" align="left">&nbsp;</td>
				<td width="549" align="left">
				<input name="content" type="text" size="70"  id="input"
					onKeyDown="if(event.keyCode==13 && event.ctrlKey){send();}">

					<input name="Submit2" type="button" id="btn_grey" class="btn_grey" value="发送"
					onClick="send()">
				</td>
				<td align="right"><input name="button_exit" type="button"
					class="btn_grey" value="退出聊天室" onClick="exit()">
				</td>
				<td align="center">&nbsp;</td>
			</tr>
			<tr>
				<td height="30" align="left">&nbsp;</td>
				<td colspan="2" align="center" class="word_dark">&nbsp;All
					CopyRights reserved </td>
				<td align="center">&nbsp;</td>
			</tr>
		</form>
			<%--<input id="siliao1" type="text">
			<button onclick="siliao()">私聊</button>--%>
	</table>
</body>
<script type="text/javascript">
	var sysBBS = "<span style='font-size:14px; line-height:30px;'>欢迎进入聊天室，请遵守聊天室规则，不要使用不文明用语。</span><br><span style='line-height:22px;'>";var sysBBS = "<span style='font-size:14px; line-height:30px;'>欢迎来到聊天室，请遵守聊天室规则，不要使用不文明用语。</span><br><span style='line-height:22px;'>";
	window.setInterval("showContent();",1000);
	window.setInterval("showOnLine();",10000);
	window.setInterval("check();",1000);
	// Jquery:JS框架.
	// 相当于window.onload
	$(function(){
		showOnLine();
		showContent();
		check();
	});

	function check(){
		$.post("${pageContext.request.contextPath}/user?method=check",function(data){
			if(data == 1){
				// 提示用户下线了
				alert("用户已经被踢下线了!");
				// 回到登录页面!
				window.location = "index.jsp";
			}
		});
	}

	// 显示在线人员列表
	function showOnLine(){
		// 异步发送请求 获取在线人员列表
		// Jquery发送异步请求
		$.post("${pageContext.request.contextPath}/online.jsp?"+new Date().getTime(),function(data){
			// $("#online") == document.getElementById("online");
			$("#online").html(data);
		});
	}

	// 显示聊天的内容
	function showContent(){
		$.post("${pageContext.request.contextPath}/user?"+new Date().getTime(),{'method':'getMessage'},function(data){
			$("#content").html(sysBBS+decodeURIComponent(data));
		});
	}

	function set(selectPerson){	//自动添加聊天对象
		if(selectPerson != "${existUser.username}"){
			form1.to.value=selectPerson;
		}else{
			alert("请重新选择聊天对象！");
		}
	}
	function toEmoji(content) {
		var cont = $.emojiParse({
			content: content,
			emojis: [{type: 'qq', path: 'images/qq/', code: ':'}, {
				path: 'images/tieba/',
				code: ';',
				type: 'tieba'
			}, {path: 'images/emoji/', code: ',', type: 'emoji'}]
		});
		return cont;
	}
	function send(){
		var reg = /\[:[\u4e00-\u9fa5]+\]/g;
		var res = $("#input").val();
		console.log(res)
		var content = res.replace(reg, function (str) {
			console.log(str,"asds"); //用来测试：函数的第一个参数代表每次搜索到的符合正则的字符
			var result = toEmoji(str);
			return result; //所以搜索到了几个字就返回几个*
		});
		console.log(content,"str2")
		if(form1.to.value==""){
			alert("请选择聊天对象！");
			return false;
		}
		if(form1.content.value==""){
			alert("发送信息不可以为空！");
			form1.content.focus();
			return false;
		}
		console.log(		$("#from").val(),
				$("#to").val(),
				content,
				$("#select").val())
		// $("#form1").serialize():让表单中所有的元素都提交.
		// jquery提交数据.{id:1,name:aa,age:25}
		$.post("${pageContext.request.contextPath}/user?"+new Date().getTime(),{
			"method": $("#sendMessage").val(),
			"from": $("#from").val(),
			"to":$("#to").val(),
			"content": encodeURIComponent(content),
			"color": $("#select").val()
		},function(data){
			console.log(data)
			$("#content").html("<span>"+sysBBS + decodeURIComponent(data) +"</span>");
		});
	}

	function exit(){
		alert("欢迎您下次光临！");
		window.location.href="${pageContext.request.contextPath}/user?method=exit";
	}

	function checkScrollScreen(){
		if(!$("#scrollScreen").attr("checked")){
			$("#content").css("overflow","scroll");
		}else{
			$("#content").css("overflow","hidden");
			//当聊天信息超过一屏时，设置最先发送的聊天信息不显示
			//alert($("#content").height());
			$("#content").scrollTop($("#content").height()*2);
		}
		setTimeout('checkScrollScreen()',500);
	}

	$.Lemoji({
		emojiInput: '#input',
		emojiBtn: '#btn',
		position: 'LEFTTOP',
		length: 8,
		emojis: {
			qq: {path: 'images/qq/', code: ':', name: 'QQ表情'},
			tieba: {path: 'images/tieba', code: ';', name: "贴吧表情"},
			emoji: {path: 'images/emoji', code: ',', name: 'Emoji表情'}
		}
	});
</script>
</html>
